<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>字典管理</title>
    <%@include file="../../public/commonJs.jsp" %>
    <%@include file="../../public/commonCss.jsp" %>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxleft borderR">
            <div class="from-header borderB ">
                <span class="font14">数据字典</span>
                <span class="classifyEdit fr mt5">
					<a href="javascript:;" class="add"></a>
					<a href="javascript:;" class="edit"></a>
					<a href="javascript:;" class="del"></a>
				</span>
            </div>
            <div class="from-body withheader contentbox8">
                <ul id="treeDemo" class="ztree" style="width:100%;height: 100%; overflow: auto;"></ul>
            </div>
        </div>
        <div class="lrboxmain borderL">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">{{title}}</span></a>
                    <span class="fr">
                         <button class="layui-btn layui-btn-small" ms-on-click="showAddLayer()">
                            <i class="layui-icon">&#xe608;</i> 添加
                        </button>
                        <input  type="text" class="inputText" placeholder="搜索代号、显示文本"
                                title="搜索代号、显示文本" ms-duplex="searchKey"/>
                        <button class="layui-btn layui-btn-small layui-btn-normal" ms-on-click="loadTableData(1)">搜索</button>
                    </span>

                </div>
            </div>
            <div class="from-body withheader contentbox" style=" overflow: auto;">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>行号</th>
                        <th>编号</th>
                        <th>文本</th>
                        <th>描述</th>
                        <th width="200" align="center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ms-repeat="codeDatas">
                        <td>&nbsp;&nbsp;&nbsp;{{(currentPage-1)*pageSize+$index+1}}</td>
                        <td>{{el.itemValue}}</td>
                        <td>{{el.itemText}}</td>
                        <td>{{el.describtion}}</td>
                        <td align="center">
                            <button class="layui-btn layui-btn-small" ms-click="showEditLayer(el.id)">修改</button>
                            <%--<button class="button redButton" ms-click="deleteCodeData(el)">删除</button>--%>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- 分页 -->
                <div id="demo" class="fenye">
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var zTreeObj;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            codes: [],//字典菜单
            codeDatas: [],//字典数据
            currentPage: 1,
            pageSize: 15,
            codeId: '',
            searchKey: '',
            title: '',
        })
        avalon.scan();
        loadTreeData();
    });
    //初始化分页插件的方法
    function loadTableData(curr) {
        var dataStr = {codeId: vm.$model.codeId, currentPage: vm.$model.currentPage, searchKey: vm.$model.searchKey};
        $.ajax({
            type: 'post',
            url: '${ctx}/codeController/selectOnePageCodeData.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                vm.codeDatas = data.result;
                layui.laypage({
                    cont: 'demo',
                    pages: data.totalPage,
                    curr: curr || 1, //当前页
                    skip: true,
                    skin: '#1E9FFF',
                    jump: function (obj, first) {
                        if (!first) {
                            vm.currentPage = obj.curr;
                            loadTableData(obj.curr);
                        }
                    }
                });
            }
        });
    }
    //弹出添加菜单对话框
    function showAddLayer() {
        layui.layer.open({
            type: 2,
            title: "新增",
            area: ['500px', '370px'],
            fix: false, //不固定
            maxmin: false,
            content: "${ctx}/codeController/toCodeForm.action"
        });
    }
    //弹出添加菜单对话框
    function showEditLayer(id) {
        layui.layer.open({
            type: 2,
            title: "编辑",
            area: ['500px', '370px'],
            fix: false, //不固定
            maxmin: false,
            content: "${ctx}/codeController/toCodeForm.action?id=" + id
        });
    }
    //加载菜单数据
    function loadTreeData() {
        $.ajax({
            type: 'post',
            url: '${ctx}/codeController/selectAllCode.action',
            data: "",
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    vm.codes = data.datas;
                    initZTree();
                } else if (data.code == -1) {
                    top.showErrorMsg("菜单数据加载失败");
                } else {
                    top.showErrorMsg("没有数据");
                }

            }
        });
    }
    //初始化树
    function initZTree() {
        var setting = {
            data: {
                simpleData: {
                    enable: true, //是否启用简单数据类型
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback: { //回调
                onClick: nodeOnClick
            }
        };
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, vm.$model.codes);
        zTreeObj.expandAll(true);
        var firstNode = zTreeObj.getNodes()[0].children[0]
        vm.codeId = firstNode.id;
        vm.title = firstNode.name;
        zTreeObj.selectNode(firstNode, false);
        loadTableData(vm.currentPage);
    }
    //点击节点的回调
    function nodeOnClick(event, treeId, treeNode) {
        if (treeNode.id == 'root') {
            return;
        }
        vm.title = treeNode.name;
        vm.codeId = treeNode.id;
        vm.currentPage = 1;
        loadTableData();
    }
    //删除字典
    function deleteCodeData(el) {
        layui.layer.confirm("确认删除吗？", {
            btn: ['确定', '取消'] //按钮
        }, function (r) {
            var dataStr = {id: el.id};
            $.ajax({
                type: 'post',
                url: '${ctx}/codeController/deleteCodeData.action',
                data: dataStr,
                dataType: "json",
                timeout: 10000,
                success: function (data) {
                    closeDialog();
                    if (data.code == 0) {
                        top.layer.msg('删除成功.', {icon: 1});
                        loadTableData();
                    } else {
                        top.layer.msg('删除失败.', {icon: 2});
                    }
                }
            });

        });

    }
</script>
</body>
</html>